<template>
  <base-container base-title="否词管理">
    <QueryFilter :model="queryData" @submit="emit('on-query')" @reset="emit('on-reset')">
      <a-form-item name="orderWordId" label="关键词">
        <a-select
          allow-clear
          show-search
          placeholder="请选择关键词"
          :options="keywordOptions"
          :fieldNames="{ label: 'word', value: 'orderWordId' }"
          v-model:value="queryData.orderWordId"
        />
      </a-form-item>
      <a-form-item name="matchType" label="匹配模式">
        <a-select
          allow-clear
          :options="matchTypeOptions"
          placeholder="请选择匹配模式"
          v-model:value.trim="queryData.matchType"
        />
      </a-form-item>
      <a-form-item name="name" label="否词">
        <a-input placeholder="请输入准确的关键词" allow-clear v-model:value.trim="queryData.name"></a-input>
      </a-form-item>
    </QueryFilter>
    <divider></divider>
    <table-toolbar title="否词列表">
      <a-button type="primary" @click="emit('on-add')">
        <template #icon><plus-outlined /></template>
        添加否词
      </a-button>
    </table-toolbar>
    <a-table
      :pagination="pagination"
      :loading="loading"
      :columns="columns"
      :data-source="tableData"
      :scroll="{ y: 1000 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operate'">
          <a-button class="mr-2" type="primary" @click="emit('on-edit', record)">编辑</a-button>
          <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record)">
            <a-button danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </base-container>
</template>

<script lang="ts" setup>
import type { TableProps } from 'ant-design-vue'
import Divider from '@/components/divider/index.vue'
import TableToolbar from '@/components/table-toolbar/index.vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import type { NegativeWord } from '@/core/interfaces/negative'
import QueryFilter from '@/components/query-filter/index.vue'
import BaseContainer from '@/components/base-container/index.vue'
import { useVModel } from '@vueuse/core'
import type { Creative } from '@/core/interfaces/promotion'
import { toLabelValue } from '@/utils'
import { MatchTypeKeyMap, ScopedTypeKeyMap } from '@/core/mapper/negative'
import type { MatchTypeEnum } from '@/core/enums/negative'
import { ScopeTypeEnum } from '@/core/enums/negative'
import { useNegativeWords } from '@/views/promotion/hooks/useNegativeWords'

interface Emits {
  (e: 'on-add'): void
  (e: 'on-edit', v: NegativeWord): void
  (e: 'on-query'): void
  (e: 'on-reset'): void
}

interface Props {
  pagination: any
  keywordOptions?: Creative[]
  loading: boolean
  queryFields: any
  onDelete: ReturnType<typeof useNegativeWords>['handleNegativeDelete']
  tableData: NegativeWord[]
}

const props = withDefaults(defineProps<Props>(), {
  onDelete: () => Promise.reject(),
  keywordOptions: () => [],
  tableData: () => [],
  loading: false
})
const queryData = useVModel(props, 'queryFields')
const emit = defineEmits<Emits>()
const matchTypeOptions = toLabelValue(MatchTypeKeyMap)

const columns: TableProps['columns'] = [
  {
    title: '否词',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '关键词',
    dataIndex: 'keyword',
    key: 'keyword',
    customRender: ({ text }) => {
      return text || '--'
    }
  },
  {
    title: '匹配模式',
    dataIndex: 'matchType',
    key: 'matchType',
    customRender: ({ text }: { text: MatchTypeEnum }) => {
      return MatchTypeKeyMap[text]
    }
  },
  {
    title: '否词范围',
    dataIndex: 'scopeType',
    key: 'scopeType',
    customRender: ({ text }: { text: ScopeTypeEnum }) => {
      return ScopedTypeKeyMap[text]
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    width: '165px'
  }
]
</script>
